<!-- <template>
    <el-button :plain="true" @click="open2" type="success">成功</el-button>
    <el-button :plain="true" @click="open3">警告</el-button>
    <el-button :plain="true" @click="open1">消息</el-button>
    <el-button :plain="true" @click="open4" type="danger">错误</el-button>
  </template>
  
  <script>
    export default {
      methods: {
        open1() {
          this.$message('这是一条消息提示');
        },
        open2() {
          this.$message({
            message: '用户登录成功！',
            type: 'success'
          });
        },
  
        open3() {
          this.$message({
            message: '警告哦，这是一条警告消息',
            type: 'warning'
          });
        },
  
        open4() {
          this.$message.error('用户名或密码错误！');
        }
      }
    }
  </script> -->


<!-- 
  <template>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </template>
  
  <script>
    export default {
      data() {
        return {
          options: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
          value: ''
        }
      }
    }
  </script> -->
  


<template>

<el-container>
  <el-header>软工1班学习辅助系统</el-header>
  <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
  <el-container>
    <el-aside width="200px"><el-menu :default-openeds="['1', '3']">
    <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>

        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>


    </el-submenu>
</el-menu></el-aside>
    <el-container>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</el-container>


</template>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
